<template>
  <div class="search_playlist_album">
    <div class="top_block">
      <div class="basic_info_box">
        <div class="cover_info_block">
          <div class="cover_box">
            <img :src="cover_path" alt="" />
          </div>
          <div class="info_box">
            <h3 class="name">{{ playlist_album_name }}</h3>
            <div class="author_name_time">
              <span class="author_name">{{ author_name }}</span>
              <span class="isuue_time">{{ isuue_time }} </span>
            </div>
            <p>{{ playlist_album_info }}</p>
          </div>
        </div>
        <div class="data_block">
          <div class="data_box">
            <div class="follow_box">
              <span>关注</span>
              <span class="data">{{ follow_data }}</span>
            </div>
            <div class="comment_box">
              <span>评论</span>
              <span class="data">{{ comment_data }}</span>
            </div>
          </div>
          <div class="btn_box">
            <span class="play_all" @click="playThisAll()">
              <img src="../../assets/play.png" alt="" />
            </span>
            <!-- <span class="collect">
              <img src="../../assets/收藏.png" alt="" />
            </span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="list_block">
      <li
        v-for="(item, index) in list"
        :key="index"
        @mouseenter="showThis(index)"
      >
        <div class="left_block">
          <span class="bold" @click="toAlbum(index)">{{ item.name }}</span>
          <span>{{ item.author }}</span>
          <span>{{ item.publish }}</span>
        </div>
        <div class="right_block">
          <div class="data_box">
            <div class="follow">
              <span>关注</span>
              <span class="data">{{ item.fans }}</span>
            </div>
            <div class="comment">
              <span>评论</span>
              <span class="data">{{ item.comments }}</span>
            </div>
          </div>
          <div class="btn_box">
            <span class="play_all" @click="playAll(index)">
              <img src="../../assets/play.png" alt="" />
            </span>
            <!-- <span class="collect">
              <img src="../../assets/收藏.png" alt="" />
            </span> -->
          </div>
        </div>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: "search_playlist_album",
  props: {
    cover_path: String,
    playlist_album_name: String,
    author_name: String,
    isuue_time: String,
    playlist_album_info: String,
    follow_data: String,
    comment_data: String,
    list: Array,
  },
  data() {
    return {};
  },
  methods: {
    toAlbum(index) {
      let flag = this.$parent.flag;
      this.$router.push({
        path: "/album_info",
        query: {
          id: this.$parent.list[index].id,
          flag: flag,
        },
      });
    },
    playThisAll() {
      var flag = this.$parent.flag;
      if (flag == 1) {
        this.$http
          .get("/album", {
            params: {
              album_id: this.$parent.album_id,
            },
          })
          .then((res) => {
            this.$router.push({
              path: "/play_page",
              query: {
                songId: res.data.data.list[0].id,
                flag: flag,
                thisId: this.$parent.album_id,
                pageCnt: Math.ceil(res.data.data.list.length / 8),
              },
            });
          });
      }
    },
    //播放当前歌单所有歌曲
    playAll(index) {
      var flag = this.$parent.flag;
      if (flag == 1) {
        this.$http
          .get("/album", {
            params: {
              album_id: this.$parent.list[index].id,
            },
          })
          .then((res) => {
            this.$router.push({
              path: "/play_page",
              query: {
                songId: res.data.data.list[0].id,
                flag: flag,
                thisId: this.$parent.list[index].id,
                pageCnt: Math.ceil(res.data.data.list.length / 8),
              },
            });
          });
      }
    },
    //鼠标经过就展示详细信息
    showThis(index) {
      if (this.$parent.flag == 1) {
        this.$parent.album_id = this.list[index].id;
        this.$parent.album_cover_path = this.list[index].cover;
        this.$parent.album_name = this.list[index].name;
        this.$parent.album_author_name = this.list[index].author;
        this.$parent.album_issue_time = this.list[index].publish;
        this.$parent.album_info = this.list[index].description;
        this.$parent.album_follow_data = JSON.stringify(this.list[index].fans);
        this.$parent.album_comment_data = JSON.stringify(
          this.list[index].comments
        );
      }
    },
  },
};
</script>

<style scoped>
img {
  width: 22px;
  height: 22px;
}
.search_playlist_album {
  width: 1198px;
  height: 623px;
  margin: 0 auto;
  padding-top: 58px;
}
.top_block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1198px;
  height: 222px;
  background: #efefef;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.34);
}
.basic_info_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 1118px;
  height: 553;
}
.cover_info_block {
  display: flex;
  justify-content: space-between;
  width: 440px;
  height: 152px;
}
.cover_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 152px;
  height: 152px;
  overflow: hidden;
}
.cover_box img {
  width: auto;
  height: auto;
  max-width: 150%;
  max-height: 150%;
}
.info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 230px;
}
.info_box h3 {
  font-size: 20px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  margin-bottom: 11px;
}
.author_name {
  margin-right: 17px;
}
.info_box div span {
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
}
.info_box p {
  width: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
  margin: 2px 0;
}

.data_block {
  width: 250px;
  display: flex;
  justify-content: space-around;
}
.data_box {
  display: flex;
}
.data_box > div {
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
  margin-right: 10px;
}
.data_box > div span {
  margin: 0 4px;
}
.top_block .data_box .data {
  font-size: 18px;
  font-family: Impact;
  font-weight: 400;
  color: #659274;
}
.btn_box {
  display: flex;
}
.btn_box span {
  margin: 0 2px;
}

.list_block {
  width: 1197px;
  height: 400px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}
.list_block li {
  display: flex;
  justify-content: space-between;
  width: 1197px;
  height: 50px;
  background: #ffffff;
  color: #21262c;
  font-family: Microsoft YaHei UI;
}

.list_block li:nth-child(even) {
  background: #efefef;
}
.list_block li:hover {
  background: #d3d2d2;
}
.list_block .left_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 750px;
}
.list_block .left_block > span {
  width: 250px;
  display: flex;
  justify-content: center;
}
.list_block .left_block .bold {
  font-weight: bold;
}
.list_block .left_block .bold:hover {
  cursor: pointer;
}
.list_block .right_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 238px;
  margin-right: 44px;
}
.play_all {
  transition: all 0.3s;
}
.play_all:hover {
  transform: scale(1.2);
  cursor: pointer;
}
</style>